<template>
  <div class="page-title">
    <div>
      <span @click="goUrl()">{{ $t("menu1") }}</span>
      <img src="@/assets/images/right2.png" alt="" srcset="" />
      <span class="current">{{ props.title }}</span>
    </div>
    <div class="rightText" @click="onRecord">
      <van-icon name="orders-o" />
      {{ props.rightText }}
    </div>
  </div>
</template>
<script setup lang="ts">
const router = useRouter();
const props = defineProps({
  title: String,
  rightText: String,
});
const emit = defineEmits(['onRecord'])

const goUrl = () => {
  router.push({
    path: "/home"
  });
};
	
const onRecord = () => {
  emit('onRecord')
}
</script>
<style scoped lang="scss">
.page-title {
  color: #fff;
  font-size: 16px;
  position: relative;
  display: inline-block;
  padding: 0 12px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  img {
    height: 20px;
    display: inline-block;
    font-weight: bold;
  }

  span {
    &.current {
      color: #f6d664;
    }
  }

  &::after {
    z-index: -1;
    content: "";
    height: 5px;
    width: 100%;

    border-radius: 5px;
    position: absolute;
    left: 0;
    bottom: 1px;
  }
}

.rightText {
  font-size: 12px;
  cursor: pointer;
  color: #f6d664;
}
</style>
